
import { Meta, Canvas, Story } from '@storybook/blocks';
import ImageFile from './../public/footer-bg.png';

<style>
{`
.storybook-welcome {
  background-color: #3d98d3;
  margin-top: 20px !important;
  line-height: 0;

  > h2 {
    padding: 10px 0 0 10px !important;
    color: #fff !important;
    border: 0;
    line-height: initial;
  }
}
`}
</style>

<div className="storybook-welcome">
  <h2>Welcome to the Rancher Storybook</h2>
  <img src={ImageFile} />
</div>

This Storybook documents the components and the design system that is used in the Rancher UIs.

For Rancher Dashboard Developer Documentation, see [here](https://rancher.github.io/dashboard/home).

> Note: This Storybook site is being actively developed and is currently a work-in-progress.

> Note that you can toggle between dark and light modes using the moon/sun icon the toolbar or with the keyboard shortcut CMD+T (Mac) or CTRL+T (Windows/Linux).

<br/>

### Writing stories  

<p>To add more components stories, please refer to the <a href="https://storybook.js.org/docs/vue/writing-docs/mdx#basic-example" target="_blank">official Storybook documentation</a>.</p>
